<template>
	<view>
		
		<view class="row j-se">
			<block v-for="(item,index) in nav" :key="index">
			<view class="d-flex a-center size36 m-left20 m-right20" 
			    :class="index == current?'white':'color_7e'"
				@click="changeNav(index)">{{item}}</view>
			</block>
		</view>
		
		
		
		<view class="viewbox auto d-flex j-sb f-wrap p-left10 p-right10 m-top30" 
		     v-if="pageData.length">
			<block v-for="(item,index) in pageData" :key="index">
			<view class="list bg28 bor_radius_20 p-bot20 m-bot20" 
			     @click="toUrl(`/pages/user/myArtDetail?goodsId=${item.id}`)">
				<view class="listImg flexac hidden">
					<image :src="item.goods_image" class="wh"></image>
				</view>
				<view class="row p-left10 p-right10">
					<view class="rows white ellipsis size26 m-top20">{{item.goods_name}}</view>
					<view class="toKenNum d-flex a-center m-top14">
						 <view class="tokenOn flexac">
							 <image src="../../static/imgs/bg02.png" class="tokenIcon"></image>
						 </view>
						 <view class="tonum  ellipsis p-left50  white h7 ">
						 {{item.token_id}}#{{item.number}}/{{item.stock}}
						</view>
					</view>
				
					<view class="rows white ellipsis size26 m-top20">{{item.creator}}</view>
				</view>
			</view>
			</block>
			
			
		</view>
		<empty title="暂无记录~" v-else></empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageShow:false,
				pageData:[],
				current:0,
				nav:['转增','受赠'],
			}
		},
		onLoad() {
			this.transferList();
		},
		methods: {
			changeNav(index){
				this.current = index;
				this.transferList();
			},
			
			transferList() {
				this.$http.get('/order/transferList',{
					type:this.current+1
				}).then(res => {
					this.pageShow = true;
					if (res.code != 1) return this.$Toast(res.msg);
					this.pageData = res.data;
				})
			},
			
			
		}
	}
</script>
<style>
	page {
		background-color: #1e201f;
	}
</style>
<style lang="scss" scoped>
	.toKenNum{
		width:100%;
		height: 50rpx;
		position: relative;
	}
	.tokenOn{
		width:50rpx;
		height: 50rpx;
		background-image: url(@/static/imgs/bg01.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		z-index:10;
	}
	.tokenIcon{
		width:30rpx;
		height: 24rpx;
	}
	.tonum{
		width: 90%;
		height: 44rpx;
		line-height: 44rpx;
		background-color: #eab855;
		margin-left:-40rpx;
		border-radius: 22rpx;
	}
	.list {
		width: 300rpx;
	}
	.listImg {
		width: 100%;
		height: 300rpx;
		vertical-align: top;
	}
</style>
